<template>
  <div
    class="customCmd"
    :class="{
      'customCmd-button': props.datamsg.editShow || props.datamsg.show,
      'customCmd-bdType1': props.datamsg.bdType == 1,
      'customCmd-bdType0': !props.datamsg.bdType,
    }"
  >
    <div
      class="customCmd-box"
      style="height: 405px"
      id="cmBox"
      v-html="props.datamsg.msg"
    ></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
defineOptions({
  name: "customCmd",
});
const props = defineProps({
  datamsg: {
    type: Object,
  },
});

</script>

<style scoped lang="scss">
.customCmd {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  /*border: 1px solid $color;*/
  //   color: $color;
  /*background: #000;*/
  /*color: #0f0;*/
  font-family: monospace;
  line-height: 20px;
  padding: 20px;
  position: relative;
  overflow: auto;
  .cmd-button-box {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: auto;
  }
  .bottom,
  .top,
  .edit,
  .save,
  .cancel {
    background: var(--tabActive);
    // color: $color;
    padding: 5px;
    box-sizing: border-box;
    display: inline-block;
    i {
      font-size: 26px;
    }
  }
  .save {
    // color: $colorsuccess;
  }
  .cancel {
    // color: $colordisabled;
  }
  .bottom:hover,
  .top:hover,
  .edit:hover,
  .save:hover,
  .cancel:hover {
    cursor: pointer;
  }
  .customCmd-box,
  .customCmd-textarea {
    overflow: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
.customCmd-button {
  padding-bottom: 50px;
}
.customCmd-bdType0 {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 5px #efe2e22e;
    background: rgba(245, 245, 245, 0.37);
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    webkit-box-shadow: inset 0 0 5px #1312121a;
    border-radius: 10px;
    background: rgba(254, 251, 255, 0.17);
  }
}
.customCmd-bdType1 {
  padding: 0px;
  background: var(--tabActive) !important;
}
// .customCmd-bdType1 /deep/ textarea {
//   /*border: 1px solid $color;*/
// //   color: $color !important;
//   background: var(--tabActive) !important;
//   /*color: #0f0;*/
//   padding: 20px;
//   position: relative;
//   overflow: auto;
// }
</style>
